<template>
  <view
    class="cascader omit"
    :style="`width: ${width}; flex: 1; text-align: right;`"
  >
    <view
      class="show-text"
      v-if="city && city.length === 2"
      @click="openSelecter"
      >{{ city[0] }},{{ city[1] }}</view
    >
    <view class="show-text weak" v-else @click="openSelecter">{{
      $t("feeServices.PleaseChoose")
    }}</view>
    <u-picker
		:closeOnClickOverlay="true"
		@close="show = false"
      :show="show"
      ref="uPicker"
      :columns="columns"
      @confirm="confirm"
      keyName="label"
      @change="changeHandler"
      @cancel="show = false"
      :cancelText="$t('cancel')"
      :confirmText="$t('confirm')"
      :defaultIndex="[0, 0]"
    ></u-picker>
  </view>
</template>

<script>
import { queryCountryCity } from "@/services/feeServices.js";
import { chinaRegion } from "@/utils/chinaRegion.js";
import { russiaRegion } from "@/utils/russiaRegion.js";
export default {
  props: {
    width: {
      type: String,
      default: "auto",
    },
    cityValue: {
      type: Array,
      default: () => [],
    },
    // 是否是修改状态
    isEditor: {
      type: Boolean,
      default: () => false,
    },
  },
  data() {
    return {
      optionsCity: [],
      countryIosCode: "RU",
      city: [],
      show: false,
      columns: [],
      language: "",
      chinaParentId: null,
    };
  },
  watch: {
    cityValue: {
      handler(newName, oldName) {
        this.city = newName
        // // uni.showLoading();
        // this.language = uni.getLocale();
        // if (newName && newName.length === 2) {
        //   var index1 = chinaRegion.findIndex(
        //     (value) =>
        //       newName[0] === value.name ||
        //       newName[0] === value.en ||
        //       newName[0] === value.ru
        //   );
        //   var index2 = russiaRegion.findIndex(
        //     (value) =>
        //       newName[0] === value.zhSubject ||
        //       newName[0] === value.enSubject ||
        //       newName[0] === value.ruSubject
        //   );
        //   if (index1 !== -1) {
        //     this.countryIosCode = "CN";
        //   } else if (index2 !== -1) {
        //     this.countryIosCode = "RU";
        //   }
        //   this.city = newName;
        //   this.getCityList();
        // } else {
        //   this.city = newName;
        //   this.getCurrentPostCity();
        // }
      },
      immediate: true,
    },
  },
  methods: {
    init(newName) {
      this.language = uni.getLocale();
      if (newName && newName.length === 2) {
        var index1 = chinaRegion.findIndex(
          (value) =>
            newName[0] === value.name ||
            newName[0] === value.en ||
            newName[0] === value.ru
        );
        var index2 = russiaRegion.findIndex(
          (value) =>
            newName[0] === value.zhSubject ||
            newName[0] === value.enSubject ||
            newName[0] === value.ruSubject
        );
        if (index1 !== -1) {
          this.countryIosCode = "CN";
        } else if (index2 !== -1) {
          this.countryIosCode = "RU";
        }
        this.getCityList();
      } else {
        this.getCurrentPostCity();
      }
    },
    openSelecter() {
      // if (!this.isEditor) {
      //   this.show = true;
      // }
      this.show = true;
      const picker = this.$refs.uPicker;
      picker.setColumnValues(0, this.optionsCity);
      picker.setColumnValues(1, this.optionsCity[0].children);
    },
    changeHandler(e) {
      const {
        columnIndex,
        value,
        values, // values为当前变化列的数组内容
        index,
        // 微信小程序无法将picker实例传出来，只能通过ref操作
        picker = this.$refs.uPicker,
      } = e;
      // 当第一列值发生变化时，变化第二列(后一列)对应的选项
      if (columnIndex === 0) {
        // picker为选择器this实例，变化第二列对应的选项
        picker.setColumnValues(1, this.optionsCity[index].children);
      }
    },
    // 回调参数为包含columnIndex、value、values
    confirm(e) {
      console.log("confirm", e);
      // const nodeInfo = this.$refs['cascader-fee'].getCheckedNodes()[0]
      const totalValue = {
        parentInfo: {
          cn: e.value[0].cn || e.value[0].label,
          en: e.value[0].en || e.value[0].label,
          ru: e.value[0].ru || e.value[0].label
        },
        childInfo: {
          cn: e.value[1].cn || e.value[1].label,
          en: e.value[1].en || e.value[1].label,
          ru: e.value[1].ru || e.value[1].label
        }
      }
      this.city = [e.value[0].label, e.value[1].label];
      this.$emit("update:cityValue", this.city);
      this.$emit('totalValue', totalValue)
      this.show = false;
    },
    multiSort(array, ...compairers) {
      return array.sort((a, b) => {
        for (const c of compairers) {
          const r = c(a, b);
          if (r !== 0) {
            return r;
          }
        }
      });
    },
    getCityList() {
      if (this.countryIosCode === "CN") {
        var chinaCity = [];
        chinaRegion.map((item, index) => {
          if (index <= 34) {
            if (this.city && this.city.length === 2) {
              if (
                this.city[0] === item.name ||
                this.city[0] === item.en ||
                this.city[0] === item.ru
              ) {
                this.city[0] =
                  this.language === "zh-Hans"
                    ? item.name
                    : this.language === "en"
                    ? item.en
                    : item.ru;
                this.chinaParentId = item.value;
              }
            }
            var newObj = {
              value:
                this.language === "zh-Hans"
                  ? item.name
                  : this.language === "en"
                  ? item.en
                  : item.ru,
              label:
                this.language === "zh-Hans"
                  ? item.name
                  : this.language === "en"
                  ? item.en
                  : item.ru,
              parentId: item.value,
              cn: item.name,
              en: item.en,
              ru: item.ru,
              children: [],
            };
            chinaRegion.map((itemCity, indexCity) => {
              if (this.city && this.city.length === 2) {
                if (
                  (this.city[1] === itemCity.name ||
                    this.city[1] === itemCity.en ||
                    this.city[1] === itemCity.ru) &&
                  itemCity.parent &&
                  this.chinaParentId === itemCity.parent
                ) {
                  this.city[1] =
                    this.language === "zh-Hans"
                      ? itemCity.name
                      : this.language === "en"
                      ? itemCity.en
                      : itemCity.ru;
                }
              }
              if (itemCity.parent === item.value) {
                newObj.children.push({
                  value:
                    this.language === "zh-Hans"
                      ? itemCity.name
                      : this.language === "en"
                      ? itemCity.en
                      : itemCity.ru,
                  label:
                    this.language === "zh-Hans"
                      ? itemCity.name
                      : this.language === "en"
                      ? itemCity.en
                      : itemCity.ru,
                  parentId: itemCity.value,
                  cn: itemCity.name,
                  en: itemCity.en,
                  ru: itemCity.ru,
                });
              }
            });
            chinaCity.push(newObj);
          }
        });
        this.optionsCity = chinaCity;
        this.columns = [this.optionsCity, this.optionsCity[0].children];
        // chinaCity.map(item => {
        //   return {
        //     ...item,
        //     children: this.multiSort(item.children, (a, b) => a.label.localeCompare(b.label))
        //   }
        // })
        // this.optionsCity = this.multiSort(chinaCity, (a, b) => a.label.localeCompare(b.label))
      } else {
        var russiaCity = [];
        russiaRegion.map((item, index) => {
          var isIn = russiaCity.findIndex(
            (item1) => item1.zhSubject === item.zhSubject
          );
          if (this.city && this.city.length === 2) {
            if (
              this.city[0] === item.zhSubject ||
              this.city[0] === item.enSubject ||
              this.city[0] === item.ruSubject
            ) {
              this.city[0] =
                this.language === "zh-Hans"
                  ? item.zhSubject
                  : this.language === "en"
                  ? item.enSubject
                  : item.ruSubject;
            }
            if (
              this.city[1] === item.zhName ||
              this.city[1] === item.enName ||
              this.city[1] === item.ruName
            ) {
              this.city[1] =
                this.language === "zh-Hans"
                  ? item.zhName
                  : this.language === "en"
                  ? item.enName
                  : item.ruName;
            }
          }
          if (isIn === -1) {
            russiaCity.push({
              value:
                this.language === "zh-Hans"
                  ? item.zhSubject
                  : this.language === "en"
                  ? item.enSubject
                  : item.ruSubject,
              label:
                this.language === "zh-Hans"
                  ? item.zhSubject
                  : this.language === "en"
                  ? item.enSubject
                  : item.ruSubject,
              zhSubject: item.zhSubject,
              cn: item.zhSubject,
              en: item.enSubject,
              ru: item.ruSubject,
              children: [
                {
                  value:
                    this.language === "zh-Hans"
                      ? item.zhName
                      : this.language === "en"
                      ? item.enName
                      : item.ruName,
                  label:
                    this.language === "zh-Hans"
                      ? item.zhName
                      : this.language === "en"
                      ? item.enName
                      : item.ruName,
                  cn: item.zhName,
                  en: item.enName,
                  ru: item.ruName,
                },
              ],
            });
          } else {
            russiaCity[isIn].children.push({
              value:
                this.language === "zh-Hans"
                  ? item.zhName
                  : this.language === "en"
                  ? item.enName
                  : item.ruName,
              label:
                this.language === "zh-Hans"
                  ? item.zhName
                  : this.language === "en"
                  ? item.enName
                  : item.ruName,
              cn: item.zhName,
              en: item.enName,
              ru: item.ruName,
            });
          }
        });
        russiaCity.map((item) => {
          return {
            ...item,
            children: this.multiSort(item.children, (a, b) =>
              a.label.localeCompare(b.label)
            ),
          };
        });
        this.optionsCity = this.multiSort(russiaCity, (a, b) =>
          a.label.localeCompare(b.label)
        );
        this.columns = [this.optionsCity, this.optionsCity[0].children];
      }
      // uni.hideLoading();
    },
    async getCurrentPostCity() {
      const { code, data } = await queryCountryCity();
      if (code === 200) {
        if (data) {
          this.countryIosCode = data.country.iso_code;
        } else {
          this.countryIosCode = "RU";
        }
      } else {
        this.countryIosCode = "RU";
      }
      this.getCityList();
      this.$emit("countryIosCode", this.countryIosCode);
    },
  },
};
</script>

<style lang="scss" scope>
.omit {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-all;
}

.show-text {
  font-size: 30upx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #000000;
}

.weak {
  opacity: 0.3;
}
</style>
